Try ShortPoint nowIn this article, we will show you how to set a current date (day, month, year) dynamically so that you won't need to update it manually.
Before | After |
Footer | |
 |  |
Design Element | |
 |  |
TABLE OF CONTENTS
- This article is for you if
- Supported platforms
- Step 1. Add a data attribute to the footer or Design Element
- Step 2. Add a custom JavaScript code in Theme Builder
- Result
This article is for you if
- You have ShortPoint installed on your SharePoint sites(s).
- You are a ShortPoint user with an active license.
Supported platforms
- SharePoint 2013
- SharePoint 2016
- SharePoint 2019
- Office 365 (SharePoint Online)
Step 1. Add a data attribute to the footer or Design Element
You can add the data attribute to both a footer and a Design Element on a specific SharePoint page. Feel free to choose the relevant option, based on your needs.
In the footer
Create the ShortPoint footer in the Generator. You can build it from scratch, or use a footer template from the Demo Pages.
Click the cog wheel icon to open the settings of the Column, where you would like to display the date/year dynamically.
Switch to the Content tab and enable the code view:
Wrap the text into a <span> tag. Add a data attribute with the value true to this tag, for example:
<span data-year="true">2020</span>
Idea: If you'd like to set a month/day, you might want to give the attribute a relevant name, for example, data-month or data-today. The value should still be set to true.
Click Update to save the changes:
Scroll down a bit and click Save Changes to update the footer:
In the Design Element
Before we start: If you are using ShortPoint SPFx version 7.3.x.xx+ on Office 365 or SharePoint 2019 environment, you might want to use the TODAY or Now data placeholders (if you'd like to display the current date/time in your Design Element). You will be able to use it in any text field, including Design Element's titles, subtitles etc. To know more about the placeholders, continue to our solution article: How To Use Placeholders In ShortPoint Connections.
Add a Design Element that you would like to update the text for. For the purpose of this article, we will use the Alert Design Element, to display the today's urgent tasks list.
Idea: Inside the Alert, we have added the title text with some random date inside, and the Simple Lists Design Element, dynamically connected to a SharePoint list that stores the tasks list, Today's tasks view:
To know more about the ShortPoint Connect feature, check our ShortPoint Connect: Basic Tutorial.
Click the cog wheel icon to open the settings of the Column, where you have your Design Element with the text to display the date/year dynamically:
Switch to the Content tab and enable the code view:
Wrap the text into a <span> tag. Add a data attribute with the value true to this tag, for example:
<span data-today="true">01/03/2021</span>
Idea: If you'd like to set a month/day, you might want to give the attribute a relevant name, for example, data-month or data-year. The value should still be set to true.
Click Update to save the changes:
Save/publish the page.
Step 2. Add a custom JavaScript code in Theme Builder
Open ShortPoint Theme Builder.
Navigate to Utilities > Custom JavaScript:
 |  |
Based on your needs, copy one of the following JavaScript codes, or prepare your own, if you'd like to display other date/time properties on your page/footer:
Option 1. To display the current year
Please use this code:
document.querySelector('[data-year="true"]').innerText = ( new Date().getFullYear() );Note: Do not forget to update the data attribute name in case you have a different one.
Option 2. To display the today's date
The today's date will be displayed in the MM/DD/YYYY format (e.g., 03/01/2021):
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
document.querySelector('[data-today="true"]').innerText = today;Notes:
1. Do not forget to update the data attribute name in case you have a different one. 2. If you need another format, make sure to modify the today variable, and other parts if required. For example, to display the date in DD/MM/YYYY format, it should look like this:
today = dd + '/' + mm + '/' + 'yyyy';
Paste it to the Custom JavaScript field:
Click Apply (1), and then Publish (2) to save your customizations.
Result
That's it. Now, the date (year, month, day) will update automatically in your footer or Design Element based on the applied settings.
In the footer
In the Design Element
Related articles:
